<template>
	<view class="player-guide-box">
		<view class="wrap" scroll-y="true" v-if="dataList.length > 0">
			<view class="item" v-for="(item, index) in dataList" :key="index"
				@click="jumpDetail(item)">
				<img class="item-img" :src="img_baseUrl+item.imgPath" alt="" />
				<view class="title">
					{{ item.title }}
				</view>
				<view class="desc">
					{{ item.introduction }}
				</view>
			</view>
		</view>
		<view class="noData" v-else style="height: 100%">
			<image :src="`${img_baseUrl}/statics/std/static/noData.png`"></image>
			<text>暂无数据</text>
		</view>
	</view>
</template>
<script>
	import {
		requestGet
	} from "@/utils/request";

	export default {
		data() {
			return {
				img_baseUrl: process.env.VUE_APP_BASEURL_IMG_API,
				dataList: [],
				total: 0,
				loadAll: true, // 已加载全部
				pages: {
					pageNum: 1,
					pageSize: 10,
				},
			};
		},
		onShow() {
			this.loadAll = true;
			this.pages = {
				pageNum: 1,
				pageSize: 10,
			};
			this.dataList = [];
			this.getList();
		},
		methods: {
			getList() {
				if (!this.loadAll) {
					return
				}
				requestGet("/baseplatform/home/content/list", {
						...this.pages,
						channelId: "5",
					})
					.then((res) => {
						if (res.code === 200) {
							if (res.rows.length > 0) {
								this.dataList.push(...res.rows);
								if (this.dataList.length <= res.total) {
									this.loadAll = false;
									this.pages.pageNum = this.pages.pageNum + 1;
								} else {
									this.loadAll = true;
								}
							}
						}
					})
					.catch((err) => console.log("错误了", err));
			},
			jumpDetail(item) {
				if (item.linkUrl) {
					uni.navigateTo({
					  url: item.linkUrl,
					});
					return
				} 
				uni.navigateTo({
					url: `/page_index/playGuide/detail?id=${item.id}`,
				});
			},
		},
		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {
			this.getList();
		},
	};
</script>

<style lang="scss">
	.wrap {
		width: 100%;
		height: 100vh;
		padding: 0 32rpx;
		box-sizing: border-box;
		display: flex;
		flex-wrap: wrap;
		align-content: flex-start;
	}

	.player-guide-box {
		width: 100%;
		// padding: 0 32rpx;
		// box-sizing: border-box;

		.list-box {
			margin-top: 28rpx;
		}

		.item {
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			margin: 24rpx 0;
		}

		.item-img {
			display: block;
			width: 686rpx;
			height: 360rpx;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			overflow: hidden;
			border: 1rpx solid rgba(0,0,0,0.1);
		}

		.title {
			padding: 16rpx 0;
			font-size: 32rpx;
			font-weight: 700;
			color: rgba(0, 0, 0, 0.8);
			line-height: 44rpx;
			box-sizing: border-box;
			padding-left: 8rpx;
		}

		.desc {
			font-size: 24rpx;
			font-weight: 400;
			color: rgba(0, 0, 0, 0.5);
			line-height: 34rpx;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			/* 控制最多显示两行 */
			-webkit-box-orient: vertical;
			overflow: hidden;
			text-overflow: ellipsis;
			box-sizing: border-box;
			padding-left: 8rpx;
		}
	}
</style>